<template>
  <view class="content">
    <view
      style="
        width: 100%;
        margin-top: 1rem;
        font-weight: 700;
        font-size: 1.2rem;
        line-height: 2rem;
        text-align: center;
        margin-bottom: 1rem;
      "
      >免费视频提取和保存</view
    >
    <view style="width: 90%; position: relative; margin: 0 4rem 1rem">
      <textarea
        :value="input"
        style="
          width: 100%;
          resize: vertical;
          padding: 0.5rem;
          padding-right: 2.5rem;
          border-radius: calc(0.5rem - 2px);
          box-sizing: border-box;
          border: 1px solid #e5e7eb;
        "
        placeholder="在此处粘贴分享文案或链接"
        @input="onInput"
      ></textarea>
      <button
        style="
          position: absolute;
          right: 0.5rem;
          bottom: 0.5rem;
          font-size: 12px;
          z-index: 10;
        "
        @click="onPaste"
      >
        粘贴
      </button>
    </view>
    <button
      style="width: 90%; margin: 0 auto; font-size: 14px; color: #fff"
      :style="{ background: input ? 'rgb(59 130 246)' : 'rgb(147 197 253)' }"
      @click="fetchVideo"
    >
      {{ loading ? "解析中..." : "提取" }}
    </button>
    <template v-if="detail">
      <view style="margin-top: 2rem">{{ detail.title }}</view>
      <swiper
        indicator-dots
        style="
          width: 100%;
          min-height: 250px;
          position: relative;
          margin-top: 2rem;
          padding: 0 10px;
        "
        @change="onSwipe"
      >
        <swiper-item
          v-for="(stream, index) in detail.streams"
          :key="index"
          style="min-height: 300px; text-align: center"
        >
          <video :src="stream.url" controls="true" object-fit="contain"></video>
        </swiper-item>
      </swiper>
      <button style="margin-top: 10px;font-size: 12px;" @click="download">点击下载</button>
    </template>
  </view>
</template>

<script>
const List = [
  {
    site: "小红书 xiaohongshu.com",
    title: "救命！粉色太温柔了 - 小红书",
    type: "video",
    streams: [
      {
        url: "http://sns-video-bd.xhscdn.com/stream/110/258/01e6d5a83b66d4c90103700191b2997f9a_258.mp4",
        size: 4701313,
        ext: "mp4",
      },
      {
        url: "http://sns-video-qc.xhscdn.com/stream/110/258/01e6d5a83b66d4c90103700191b2997f9a_258.mp4?sign=ac7956a52c490bad3cb1481829b662ae&t=66e0a9f8",
        size: 4701314,
        ext: "mp4",
      },
      {
        url: "http://sns-video-al.xhscdn.com/stream/110/258/01e6d5a83b66d4c90103700191b2997f9a_258.mp4",
        size: 4701313,
        ext: "mp4",
      },
      {
        url: "http://sns-video-hw.xhscdn.net/stream/110/258/01e6d5a83b66d4c90103700191b2997f9a_258.mp4",
        size: 4701313,
        ext: "mp4",
      },
    ],
    url: "http://xhslink.com/A/jVKYqa",
  },
];
export default {
  data() {
    return {
      title: "小视频解析下载",
      loading: false,
      input: "",
      detail: null,
      index: 0,
    };
  },
  onLoad() {},
  methods: {
    async fetchVideo() {
      if (!this.input || this.loading) return;
      this.loading = true;
      const { data } = await uni.request({
        url: "https://lux.leeapps.dev",
        method: "POST",
        timeout: 100000,
        data: {
          input: this.input,
        },
      });
      this.detail = data.list[0];
      this.loading = false;
    },
    onInput(e) {
      this.input = e.detail.value;
    },
    onPaste() {
      uni.getClipboardData({
        success: (res) => {
          this.input = res.data;
        },
      });
    },
    onSwipe(e) {
      this.index = e.detail.current;
    },
    async download() {
      const url = this.detail.streams[this.index].url;
      uni.downloadFile({
        url,
        success: (res) => {
          console.log("success:", res);
          uni.getFileSystemManager().saveFile({
            tempFilePath: res.tempFilePath,
            success: (res) => {
              console.log('保存成功:', res);
            },
            fail: (res) => {
              console.log('saveFile fail:', res)
            }
          });
        },
        fail: (res) => {
          console.log("fail:", res);
        },
      });
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
